<template>
	<view>
		<u-navbar placeholder fixed autoBack title="班组管理"></u-navbar>
		<view class="search u-border-bottom d-p-l-30 d-p-r-30 d-p-t-20 d-p-b-20 d-flex">
			<view class="input d-flex d-flex-1">
				<u-icon name="search" size="38rpx" color="#ADB4BD"></u-icon>
				<view class="d-flex-1"><u--input v-model="keyWord" border="none" style="padding: 0;height: 75rpx;" placeholder="请输入查询信息"></u--input></view>
			</view>
			<u-button text="搜索" @click="getList()" type="primary" :customStyle="{ width: '136rpx', height: '75rpx', marginLeft: '20rpx' }"></u-button>
		</view>
		<u-gap height="115rpx" bgColor="#ffffff"></u-gap>
		<view class="d-p-30" v-if="count">
			<view class="card bg d-p-30">
				<view class="d-font-32" style="font-weight: bold;color: #FFFFFF;">班组概况</view>
				<view class="card d-m-t-30">
					<view class="table d-text-center" style="border-radius: 10rpx;">
						<view class="tr">
							<view class="th" style="color: #21A5F3;">序号</view>
							<view class="th" style="color: #21A5F3;">所属单位</view>
							<view class="th" style="color: #21A5F3;">班组数</view>
							<view class="th" style="color: #21A5F3;">班组人数</view>
						</view>
						<view class="tr" v-for="(item, index) in count" :key="index">
							<view class="td">{{ index + 1 }}</view>
							<view class="td u-line-1" style="color: #21A5F3;max-width: 180rpx;">{{ item.deptName }}</view>
							<view class="td">{{ item.groups }}</view>
							<view class="td">{{ item.member }}</view>
						</view>
						<view class="tr">
							<view class="td">合计</view>
							<view class="td">{{ _number }}</view>
							<view class="td">{{ _group }}</view>
							<view class="td">{{ _member }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="d-flex d-m-b-20 d-m-t-30"><view class="d-font-32 d-flex-1" style="color: #323334;font-weight: bold;">班组信息</view></view>
			<view class="card d-p-30 d-m-b-30" v-for="(item, index) in list" :key="index" @click="appTeamDetail(item)">
				<view class="d-font-32 d-m-b-20" style="font-weight: bold;color: #151C24;">{{ item.bzmc }}</view>
				<view class="d-flex" style="color: #5D6672;">
					<view class="d-font-24" style="flex: 3;">
						<text style="">班组长</text>
						<text class="d-m-l-20" style="color: #162233;">{{ item.bzzxm }}</text>
					</view>
					<view class="d-font-24 d-flex" style="flex: 3;">
						<text class="d-m-r-20">联系电话</text>
						<!-- 这里到时候阻止冒泡 -->
						<u--text color="#21A5F3" size="24rpx" mode="phone" call :text="item.bzzlxdh"></u--text>
					</view>
				</view>
				<view class="d-flex d-m-t-20" style="color: #5D6672;">
					<view class="d-font-24 u-line-1" style="flex: 3;">
						<text style="">所属单位</text>
						<text class="d-m-l-20" style="color: #162233;;">{{ item.deptName }}</text>
					</view>
					<view class="d-font-24" style="flex: 3;">
						<text style="">班组人数</text>
						<text class="d-m-l-20" style="color: #162233;">{{ item.cyrs }}人</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { groupOverview, groups } from '../../../common/api.js';
export default {
	data() {
		return {
			gcbh: null,
			count: null,
			pageNum: 1,
			pageSize: 20,
			pageLast: 1,
			list: [],
			keyWord: ''
		};
	},
	onLoad(e) {
		this.gcbh = e.gcbh;
		this.init();
	},
	onReachBottom() {
		if (this.pageNum < this.pageLast) {
			++this.pageNum;
			this.getData().then(e => {
				this.list = this.list.concat(e.data);
			});
		}
	},
	methods: {
		init() {
			groupOverview({
				params: {
					gcbh: this.gcbh,
					deptId: this.$user.deptId
				}
			}).then(e => {
				this.count = e.data;
			});
			this.getList();
		},
		getList() {
			this.pageNum = 1;
			this.getData().then(e => {
				this.pageLast = Math.ceil(e.total / this.pageSize);
				this.list = e.data;
			});
		},
		getData() {
			return groups({
				params: {
					gcbh: this.gcbh,
					deptId: this.$user.deptId,
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					keyWord: this.keyWord
				}
			});
		},
		appTeamDetail(item) {
			uni.$u.route({
				url: '/pages/index/app/appTeamDetail',
				params: {
					id: item.id
				}
			});
		}
	},
	computed: {
		_number() {
			let c = 0;
			if (this.count) {
				c = this.count.length;
			}
			return c;
		},
		_group() {
			let c = 0;
			if (this.count) {
				for (let i in this.count) {
					c += Number(this.count[i].groups);
				}
			}
			return c;
		},
		_member() {
			let c = 0;
			if (this.count) {
				for (let i in this.count) {
					c += Number(this.count[i].member);
				}
			}
			return c;
		}
	}
};
</script>

<style lang="scss">
.search {
	position: fixed;
	left: 0;
	right: 0;
	z-index: 999;
	background-color: #ffffff;
	.input {
		height: 75rpx;
		background: #f6f7f8;
		border-radius: 10rpx;
		padding: 0 20rpx;
	}
}
.card {
	box-shadow: 0rpx 5rpx 10rpx rgba(0, 0, 0, 0.05);
	border-radius: 10rpx;
	background-color: #ffffff;
	.table {
		font-size: 28rpx;
		display: table;
		width: 100%;
		vertical-align: middle;
		border: 1px solid #f6f7f8;
		.tr {
			display: table-row;
			.th,
			.td {
				display: table-cell;
				height: 80rpx;
				vertical-align: middle;
			}
			.th {
				font-weight: bold;
				color: #162233;
			}
			&:nth-child(2n-1) {
				background-color: #f6f7f8;
			}
		}
	}
}
page {
	background-color: #fbfcfc;

	.bg {
		background-color: #21a5f3;
	}
}
</style>
